<template>
<!--主页导航栏-->
  <el-container>
    <el-header class="header-container">
      <div class="logo-container">
        <img src="https://p26-doubao-search-sign.byteimg.com/labis/image/0e5780a5e01b9a1f8ed5a180bbea4da6~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1764662618&x-signature=qqCbPuAHXNeebI6fqoKsRPMbJEo%3D" alt="Logo" class="logo">
        <span class="logo-text">管理系统</span>
      </div>
      <div class="header-title">Header</div>
      <el-dropdown trigger="click" @command="handleCommand">
        <div class="avatar-wrapper">
          <el-avatar :size="avatarSize" :src="avatarUrl"></el-avatar>
          <el-link :underline="false">用户名</el-link>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a"><i class="el-icon-user-solid"></i>个人中心</el-dropdown-item>
          <el-dropdown-item command="b"><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <router-link to="/home/index" tag="span">
            <el-menu-item index="/home/index">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
          </router-link>
          <router-link to="/home/user" tag="span">
            <el-menu-item index="/home/user">
              <i class="el-icon-menu"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
          </router-link>
        </el-menu>

      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //右侧头像
      avatarUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      avatarSize:"large",

    }
  },
  methods: {
    //头像下拉菜单功能函数
    handleCommand(command) {

      if (command === 'b'){
        this.$confirm('即将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          this.$router.push({
            path:"/login",
          });
          this.$store.commit('setUser',null)

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      }
    },

  }
}
</script>

<style scoped>
.el-container{
  max-height: 87vh;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
  min-height: 87vh;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* Logo样式 */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  width: 40px;
  object-fit: contain;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.avatar-wrapper {
  display: flex;
  align-items: center;
}
</style>
